<template>
  <div class="tabs">
    <van-tabs v-model:active="active" @change="changeTab">
      <van-tab :title="item" v-for="item in tabs" :key="item"></van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const active = ref(props.actvie !== undefined ? Number(props.actvie) : 0);
const props = defineProps({
  tabs: Array,
  actvie: String
});
const emit = defineEmits(["changeTab"]);
const changeTab = () => {
  emit("changeTab", active.value);
};
</script>

<style lang="less" scoped>
.tabs {
  /deep/ .van-tab {
    height: 48px;
  }
  /deep/ .van-tab__text {
    font-size: 16px;
    line-height: 45px;
    color: #919599;
    letter-spacing: 1px;
  }
  /deep/ .van-tabs__line {
    background: #3e77fa;
    width: 24px;
    height: 3px;
  }
  /deep/ .van-tab--active {
    .van-tab__text {
      color: #3e77fa;
      font-weight: 600;
    }
  }
}
</style>
